<template>
    <div>
        <input type="file" v-show="false" @change="_uploadChange($event)" ref="file" accept=".xlsx,.xls">
    </div>
</template>

<script type="text/javascript">
/**
 * @Author chensiqi [2022-05-07 15:21:26]
 * @Description 上传excle文档提取用户
 * 使用接口：
 * 
 * 事件：
 * 
 * 方法：
 * selectFile() -> 开始选择文件,返回Promise，其中上传成功后返回html内容
 * 
 */
import $http from '@http';

export default {
    name: 'file-to-html-input',

    components: {
    },

    props: {
        selectedFile: { type: Function, return: () => { } },
        //上传地址
        server: { type: String, default: undefined },
    },

    data() {
        return {}
    },

    computed: {},

    watch: {},

    created() { },

    destroyed() { },

    mounted() {
    },

    methods: {
        /**
         * 开始选择文件 - 激活input的点击事件
         */
        selectFile() {
            this.$refs['file'].value = null;
            this.$refs['file'].click();
            return new Promise((resolve, reject) => {
                this.resolve = resolve;
                this.reject = reject;
            })
        },
        /**
         * 选择文件后开始上传
         */
        _uploadChange(event) {
            const file = event.target.files[0];
            if (!file) return;
            this._uploading(file)
        },
        /**
         * 本地上传
         */
        async _uploading(file) {
            const { size, name } = file
            if (size > 1024 * 10 * 1024 * 10) return this.$notify.error('文档大小不能超过10MB')
            let data = Object.assign({}, {
                file: file,
                fileName: name
            })
            const form = new FormData();
            Object.keys(data).forEach(key => {
                form.append(key, data[key]);
            });
            this.selectedFile();
            try {
                const result = await $http.post(`${this.server}`, form, { 'Content-Type': 'multipart/form-data' })
                this.resolve(result);
            } catch (err) {
                this.$refs['file'].value = null
                this.reject(null);
                return
            }

        },
    }
}
</script>

<style lang="scss" scoped>
</style>